<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            
            * {
                padding: 0;
                margin: 0;
            }

            #wrap {
                width: 200px;
                height: 350px;
                border: 5px solid black;
                margin: 100px auto 0;
                position: relative;
                overflow: hidden;
            }

            img {
                width: 200px;
                height: 350px;
                float: left;
            }

            #content {
                width: 800px;
                height: 350px;
                position: absolute;
                top: 0;
                left: 0;
            }

            #left, #right {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                background: black;
                color: white;
                position: absolute;
                top: calc(50% - 15px);
                text-align: center;
                line-height: 26px;
                left: 10px;
            }

            #right {
                left: calc(100% - 40px);
            }

            #wrap>.dot {
                font-size: 0;
                text-align: center;
                height: 10px;
                position: absolute;
                width: 100%;
                bottom: 20px;
                /*background: red;*/
            }

            #wrap span {
                display: inline-block;
                width: 10px;
                height: 10px;
                background: white;
                border-radius: 50%;
                margin: 0 10px;
                cursor: pointer;
            }

            #wrap .gray {
                background: gray;
            }


        </style>
    </head>
    <body>

        <div id="wrap">
            <div id="content">
                <img src="img/01.jpg" alt="">
                <img src="img/02.jpg" alt="">
                <img src="img/03.jpg" alt="">
                <img src="img/01.jpg" alt="">
            </div>
            <button id="left"><</button>
            <button id="right">></button>
            <div class="dot">
                <span class="gray"></span>
                <span></span>
                <span></span>
            </div>
        </div>
        
    </body>
</html>
<script>

    // 获取元素
    var wrapDiv = document.getElementById("wrap");
    var contentDiv = document.getElementById("content");

    // 记录初始位置
    var left = 0;

    var timerId = setInterval(autoscroll, 20);
    var timeout;

    var index = 0;

    var w = wrapDiv.clientWidth;


    function autoscroll() {
        left -= 2;
        contentDiv.style.left = left + "px";

        if (left % w == 0) {
            index++;
            clearInterval(timerId);
            timeout = setTimeout(function() {
                timerId = setInterval(autoscroll, 20);
            }, 2000);

            // 如果跑到最后一张，切到第一张
            if (left == -w * 3) {
                left = 0;
                contentDiv.style.left = left + "px";
                index = 0;
            }
            changeDot();
        }
    }

    wrapDiv.onmouseover = function() {
        clearInterval(timerId);
        clearTimeout(timeout);
    };

    wrapDiv.onmouseout = function() {
        timerId = setInterval(autoscroll, 20);
    };

    var leftBtn = document.getElementById("left");

    leftBtn.onclick = leftClickAction;
    // 左边按钮点击事件
    function leftClickAction() {
        if (contentDiv.offsetLeft % w == 0) {
            index--;
        }
        if (index == -1) {
            index = 2;
        }
        changeDot();
        left = -w * index;
        contentDiv.style.left = left + "px";
    }

    var rightBtn = document.getElementById("right");
    rightBtn.onclick = rightClickAction;
    // 右边按钮点击事件
    function rightClickAction() {
        index++;
        if (index == 3) {
            index = 0;
        }
        changeDot();
        left = -w * index;
        contentDiv.style.left = left + "px";
    }

    // 获取所有span
    var spanArr = document.querySelectorAll("#wrap span");

    // 改变小点点
    function changeDot() {

        [].slice.call(spanArr).forEach(function(ele) {
            ele.className = "";
        });
        spanArr[index].className = "gray";

    }

    // 小点儿点儿点击事件
    for (var i = 0; i < spanArr.length; i++) {

        spanArr[i].index = i;

        spanArr[i].onclick = function() {
            // 重复的代码考虑一下优化？
            index = this.index;
            left = -w * index;
            contentDiv.style.left = left + "px";
            changeDot();
        }
    }



</script>